<template>
  <div class="wrapper">
    <custom-case-chart width="100%" height="100%" ref="customCaseChart"></custom-case-chart>
  </div>
</template>

<script>
import CustomCaseChart from "@/components/chart/Chart.vue";
import echarts from "echarts";
export default {
  components: { CustomCaseChart },
  props: {},
  data() {
    return {
      yearCount: 7, // 横轴每个数据的年份
      categoryCount: 30, // 横轴数据
      xAxisData: [],
      customData: [],
      legendData: [],
      dataList: [],
      encodeY:[],
      options: {},
    };
  },
  created() {},
  mounted() {
    this.initHandle();
  },
  activated() {},
  updated() {},
  methods: {
    initHandle() {
      // 处理数据
      this.legendData.push("trend");
      this.encodeY = [];
      for (var i = 0; i < this.yearCount; i++) {
        this.legendData.push(2010 + i + "");
        this.dataList.push([]);
        this.encodeY.push(1 + i);
      }
    
      for (var i = 0; i < this.categoryCount; i++) {
        var val = Math.random() * 1000;
        this.xAxisData.push("category" + i);
        var customVal = [i];
        this.customData.push(customVal);

        for (var j = 0; j <this.dataList.length; j++) {
          var value =  j === 0? echarts.number.round(val, 2) : echarts.number.round(
                  Math.max(0, this.dataList[j - 1][i] + (Math.random() - 0.5) * 200),
                  2
                );
          this.dataList[j].push(value);
          customVal.push(value);
        }
      }

      this.options = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.legendData,
        },
        dataZoom: [
          {
            type: "slider",
            start: 50,
            end: 70,
          },
          {
            type: "inside",
            start: 50,
            end: 70,
          },
        ],
        xAxis: {
          data: this.xAxisData,
        },
        yAxis: {},
        series: [
          {
            type: "custom",
            name: "trend",
            renderItem: this.renderItem,
            itemStyle: {
              borderWidth: 2,
            },
            encode: {
              x: 0,
              y: this.encodeY,
            },
            data: this.customData,
            z: 100,
          },
        ].concat(
          this.dataList.map( (data, index)=>{

            return {
              type: "bar",
              animation: false,
              name: this.legendData[index + 1],
              itemStyle: {
                opacity: 0.5,
              },
              data: data,
            };
          })
        ),
      };
      console.log('this.options',this.options)
      this.$refs.customCaseChart.initChart(this.options);
    },
    renderItem(params, api) {
      var xValue = api.value(0);
      var currentSeriesIndices = api.currentSeriesIndices();
      var barLayout = api.barLayout({
        barGap: "30%",
        barCategoryGap: "20%",
        count: currentSeriesIndices.length - 1,
      });
      var points = [];
      for (var i = 0; i < currentSeriesIndices.length; i++) {
        var seriesIndex = currentSeriesIndices[i];
        if (seriesIndex !== params.seriesIndex) {
          var point = api.coord([xValue, api.value(seriesIndex)]);
          
          point[0] += barLayout[i - 1].offsetCenter;
          point[1] -= 20;
          points.push(point);
        }
      }

      var style = api.style({
        stroke: api.visual("color"),
        fill: null,
      });

      return {
        type: "polyline",
        shape: {
          points: points,
        },
        style: style,
      };
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 810px;
  height: 500px;
  border: 10px solid rosybrown;
  margin: 0 auto;
}
</style>
